<template>
    <div :class="[type == 'reversal' ? 'submit-layout-reversal' : 'submit-layout']">
        <div class="sl-left"><slot name="left"></slot></div>
        <div class="sl-right"><slot name="right"></slot></div>
    </div>
</template>

<script>
export default {
    name: 'SubmitLayout',
    props: {
        type: {
            type: String,
            default: ''
        }
    }
};
</script>

<style scoped lang="less">
.submit-layout,
.submit-layout-reversal {
    min-height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.submit-layout {
    .sl-left {
        flex: 1;
        div {
            justify-content: flex-start;
        }
    }
    .sl-left,
    .sl-right {
        min-height: 50px;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
        overflow: auto;
        div {
            flex-grow: 1;
            display: flex;
            align-items: center;
            button {
                padding: 10px 8px !important;
            }
        }
        .seat {
            width: 120px;
        }
    }

    .sl-right {
        max-width: 50%;
        div {
            margin: 0 5px;
            justify-content: center;
        }
    }
    @media (max-width: 706px) {
        .sl-left {
            div {
                width: 50%;
                margin: 5px 0;
                justify-content: center;
                button {
                    min-width: 120px;
                }
            }

            .seat {
                display: none;
            }
        }
        .sl-right {
            div {
                width: 70%;
                margin: 5px 0;
            }
            .seat {
                display: none;
            }
        }
    }
    @media (max-width: 550px) {
        .sl-left {
            div {
                width: 70%;
            }
        }
    }
}

.submit-layout-reversal {
    .sl-right {
        flex: 1;
        div {
            margin: 0 5px;
            justify-content: center;
        }
    }

    .sl-left,
    .sl-right {
        min-height: 50px;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
        overflow: auto;
        div {
            flex-grow: 1;
            display: flex;
            align-items: center;
            button {
                padding: 10px 8px !important;
            }
        }
        .seat {
            width: 120px;
        }
    }

    .sl-left {
        max-width: 50%;
        overflow: hidden;
        div {
            justify-content: flex-start;
        }
    }

    @media (max-width: 706px) {
        .sl-right {
            div {
                width: 50%;
                margin: 5px 0;
                justify-content: center;
                button {
                    min-width: 120px;
                }
            }

            .seat {
                display: none;
            }
        }
        .sl-left {
            div {
                width: 70%;
                margin: 5px 0;
            }
            .seat {
                display: none;
            }
        }
    }

    @media (max-width: 550px) {
        .sl-right {
            div {
                width: 70%;
            }
        }
    }
}
</style>
